<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>供应商-审批</title>
	<style type="text/css">
	*{margin: 0; padding: 0;}
	 .page{ width:1200px; margin: 0 auto; overflow: hidden; position: relative; display: none;}
   .page1{ display: block; }
	 .page img{ width: 100%}
       .page:nth-child(1){display: block;}
       .pane{ border: 2px solid red; }
       .pane1{ width: 152px; height: 54px;position: absolute; top: 8.9%; right: 18.7%}
       .pane2{ width: 340px; height: 50px;position: absolute; top:44.1%; right: 7%}
       .pane3{ width: 124px; height: 42px;position: absolute; top:9.2%; right: 6%}
       .pane4{ width: 124px; height: 30px;position: absolute; top:69.6%; left: 8%}
       .pane5{ width: 64px; height: 30px;position: absolute; top:5.8%;right:6%}
       .pane6{ width: 66px; height: 30px;position: absolute; top:18%; right: 25%}
       .pane7{ width: 60px; height: 30px;position: absolute; top:20.1%; left: 52.4%}
       .pane8{width: 144px; height: 80px;position: absolute; top:16.4%; right: 27%}
       .pane9{ width: 124px; height: 34px;position: absolute; top:17.6%;right:34%}
       .pane10{ width: 84px; height: 30px;position: absolute; top:49.4%;right:55.6%}
       .pane11{ width: 72px; height: 30px;position: absolute; top:45.6%; right: 13%}
       .pane12{ width: 60px; height: 34px;position: absolute; top:64.5%; right: 24.6%}
       .pane13{ width: 40px; height: 34px;position: absolute; top:6%; right:11%}
       .pane14{ width: 54px; height: 34px;position: absolute; top:56%; right: 33.4%}
	</style>
	<script src="js/jquery-1.8.3.min.js"></script>
  <script src="show.js"></script>
</head>
<body>
	<div class="page page1">
	  <img src="images/caigoufangshenpiliu-1.png">
	  <div class="pane pane1"></div>
	</div>
	<div class="page page2">
		<img src="images/caigoufangshenpiliu-2.png">
          <div class="pane pane2"></div>
	</div>
	<div class="page page3 to800">
		<img src="images/caigoufangshenpiliu-3.png">
          <div class="pane pane3"></div>
	</div>
  <div class="page page4">
    <img src="images/caigoufangshenpiliu-4.png">
          <div class="pane pane4"></div>
  </div>
  <div class="page page5">
    <img src="images/caigoufangshenpiliu-5.png">
          <div class="pane pane5"></div>
  </div>

  <div class="page page6">
    <img src="images/caigoufangshenpiliu-6.png">
          <div class="pane pane6"></div>
  </div>
   <div class="page page7">
    <img src="images/caigoufangshenpiliu-7.png">
          <div class="pane pane7"></div>
  </div>
  <div class="page page8">
    <img src="images/shenpiliushezhi-tip1.png" style="width:182px;position:absolute;top: 220px;right:120px">
    <img src="images/caigoufangshenpiliu-8.png">
          <div class="pane pane8"></div>
  </div>
   <div class="page page9 to800">
     <img src="images/shenpiliushezhi-tip2.png"  style="width:182px;position:absolute;top: 220px;right:180px">
    <img src="images/caigoufangshenpiliu-9.png">
          <div class="pane pane9"></div>
  </div>
  <div class="page page10 to800" >
    <img src="images/shenpiliushezhi-tip3.png"  style="width:182px;position:absolute;top: 620px; right:24px">
    <img src="images/caigoufangshenpiliu-10.png">
          <div class="pane pane10"></div>
  </div>
   <div class="page page11 to800">
    <img src="images/caigoufangshenpiliu-11.png">
          <div class="pane pane11"></div>
  </div>
  <div class="page page12">
    <img src="images/caigoufangshenpiliu-12.png">
          <div class="pane pane12"></div>
  </div>
   <div class="page page13 to800">
    <img src="images/caigoufangshenpiliu-13.png">
          <div class="pane pane13"></div>
  </div>
  <div class="page page14 last">
    <img src="images/shenpiliushezhi-tip4.png"  style="width:182px;position:absolute;top: 720px; right:124px">
    <img src="images/caigoufangshenpiliu-14.png">
          <div class="pane pane14"></div>
  </div>
	<script>
                $(function(){
                	var timer;
                	timer=setInterval(function(){
                		$(".pane").toggle()
                	},600);

                	$(".page").click(function(){
                         if($(this).hasClass('to800')){
                          $(this).hide();
                          $(this).next().stop().show(0,function(){
                            $('html, body').animate({  
                                 scrollTop: 500  
                             },100); 
                          })
                        }
                         if($(this).hasClass('last')){
                          return false;
                        }
                        else{
                          $(this).hide();
                          $(this).next().stop().show()
                        }	
                	})
                })
	</script>
</body>
</html>